import { MenuOutlined } from '@ant-design/icons';
import { Card, List } from 'antd';
import React, { useState } from 'react';
import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd';

// 定义列表项类型
interface ListItem {
    id: string;
    content: string;
}

const initialItems: ListItem[] = Array.from({ length: 5 }, (_, i) => ({
    id: `item-${i + 1}`,
    content: `列表项 ${i + 1}`
}));

const DragAndDropDemo: React.FC = () => {
    const [items, setItems] = useState<ListItem[]>(initialItems);

    const onDragEnd = (result: DropResult) => {
        if (!result.destination) return;

        const newItems = [...items];
        const [removed] = newItems.splice(result.source.index, 1);
        newItems.splice(result.destination.index, 0, removed);

        setItems(newItems);
    };

    return (
        <div style={{ maxWidth: 500, margin: '40px auto' }}>
            <Card title="可拖拽列表" bordered={false}>
                <DragDropContext onDragEnd={onDragEnd}>
                    <Droppable droppableId="droppable">
                        {(provided) => (
                            <div
                                {...provided.droppableProps}
                                ref={provided.innerRef}
                            >
                                <List
                                    dataSource={items}
                                    renderItem={(item, index) => (
                                        <Draggable key={item.id} draggableId={item.id} index={index}>
                                            {(provided, snapshot) => (
                                                <List.Item
                                                    ref={provided.innerRef}
                                                    {...provided.draggableProps}
                                                    {...provided.dragHandleProps}
                                                    style={{
                                                        ...provided.draggableProps.style,
                                                        background: snapshot.isDragging ? '#fafafa' : 'white',
                                                        padding: 16,
                                                        margin: '8px 0',
                                                        border: '1px solid #e8e8e8',
                                                        borderRadius: 4,
                                                        boxShadow: snapshot.isDragging
                                                            ? '0 4px 8px rgba(0,0,0,0.1)'
                                                            : 'none'
                                                    }}
                                                >
                                                    <MenuOutlined style={{ marginRight: 8, color: '#999' }} />
                                                    {item.content}
                                                </List.Item>
                                            )}
                                        </Draggable>
                                    )}
                                />
                                {provided.placeholder}
                            </div>
                        )}
                    </Droppable>
                </DragDropContext>
            </Card>
        </div>
    );
};

export default DragAndDropDemo;